<template>
  <div class="personalData">
    <van-nav-bar
        :title="$t('personal_data')"
        left-arrow
        @click-left="$router.push('/my/index')"
    />
    <div class="content_list">
      <!--     身份认证 -->
      <div class="content_item" @click="supplyInfo('identityInfo')" v-if="menuAuth['type1']">
        <div>
          <img class="image" src="../../../assets/icon_shenfenrenzheng.png">
          <span class="text">{{ $t('identity_auth') }}</span>
        </div>
        <div class="select_right">
          <span class="select_right_text">{{ userVerify.identityInfo ? $t('sel_to') : $t('add_to') }}</span>
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
      <!--      个人信息-->
      <div class="content_item" @click="supplyInfo('personalInfo')" v-if="menuAuth['type2']">
        <div>
          <img class="image" src="../../../assets/icon_gerenxinxi.png">
          <span class="text">{{ $t('personal_info') }}</span>
        </div>
        <div class="select_right">
          <span class="select_right_text">{{ userVerify.personalInfo ? $t('update_to') : $t('add_to') }}</span>
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
      <!--      工作信息-->
      <div class="content_item" @click="supplyInfo('workInfo')" v-if="menuAuth['type3']">
        <div>
          <img class="image" src="../../../assets/icon_gongzuoxinxi.png">
          <span class="text">{{ $t('work_info') }}</span>
        </div>
        <div class="select_right">
          <span class="select_right_text">{{ userVerify.workInfo ? $t('update_to') : $t('add_to') }}</span>
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
      <!--      紧急联系人-->
      <div class="content_item" @click="supplyInfo('contactsInfo')" v-if="menuAuth['type4']">
        <div>
          <img class="image" src="../../../assets/icon_gerrenziliao.png">
          <span class="text">{{ $t('emergency_contact') }}</span>
        </div>
        <div class="select_right">
          <span class="select_right_text">{{ userVerify.contactsInfo ? $t('update_to') : $t('add_to') }}</span>
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
      <!--      运营商授权-->
      <div class="content_item" @click="supplyInfo('operatorsAuth')" v-if="menuAuth['type5']">
        <div>
          <img class="image" src="../../../assets/icon_yunyingshang.png">
          <span class="text">{{ $t('operator_auth') }}</span>
        </div>
        <div class="select_right">
          <span class="select_right_text">{{ userVerify.operatorsInfo ? $t('update_to') : $t('add_to') }}</span>
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
      <!--      银行卡包-->
      <div class="content_item" @click="supplyInfo(userVerify.bankCardInfo ? 'myCard' :'bankCardInfo')"
           v-if="menuAuth['type6']">
        <div>
          <img class="image" src="../../../assets/icon_qiabao.png">
          <span class="text">{{ $t('bank_package') }}</span>
        </div>
        <div class="select_right">
          <span class="select_right_text">{{ userVerify.bankCardInfo ? $t('update_to') : $t('add_to') }}</span>
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
    </div>
    <div class="confirm">
      <button @click="confirm">{{ $t('finish') }}</button>
    </div>
  </div>
</template>

<script>
import {fetchMenuFatherShow, userInfoVerify} from '@/api/home'
import {fetchUserInfo} from '@/api/my'
import {inject, provide, reactive, ref, toRefs} from "vue";
import router from "@/router";
import {useI18n} from 'vue-i18n'
import {Toast} from "vant";
import {debounce, processNext} from '@/utils/tool'
import Store from "@/store";
import {useStore} from "vuex";

export default {
  setup() {
    const store = useStore()
    const userVerify = ref({})
    const {tm} = useI18n()
    // 流程填写进度
    const fetchUserVerify = async () => {
      const res = await userInfoVerify()
      if (res.code === 1) {
        userVerify.value = res.data
        localStorage.setItem('userInfoVerify', JSON.stringify(res.data))
      }
    }
    // 获取用户所有信息
    const getUserInfo = async () => {
      const res = await fetchUserInfo()
      if (res.code === 1) {
        // 存储用户全部信息
        localStorage.setItem('userWriteInfo', JSON.stringify(res.data))
      }
    }

    const menuAuth = ref({})
    const supplyInfo = (value) => {
      const obj = {
        identityInfo: userVerify.value['identityInfo'],
        personalInfo: userVerify.value['personalInfo'],
        workInfo: userVerify.value['workInfo'],
        contactsInfo: userVerify.value['contactsInfo'],
        operatorsAuth: userVerify.value['operatorsInfo'],
        bankCardInfo: userVerify.value['bankCardInfo'],
        supplementInfo: userVerify.value['incomeProveInfo'],
        // 如果已经添加银行卡信息 跳转我的收款银行卡列表
        myCard: true
      }
      if (obj[value]) {
        provide(Store.routeRecord,'/personalData')
        router.push({
          path:'/' + value,
          query: {
            backName: '/personalData'
          }
        })
        return;
      } else {
        for (let i in obj) {
          // 未填写页面跳转第一位
          if (!obj[i]) {
            provide(Store.routeRecord,'/personalData')
            router.push({
              path: '/' + i,
              query: {
                backName: '/personalData'
              }
            })
            return
          }
        }
      }
    }
    const confirm = debounce(
        async () => {
          const {canBorrow} = JSON.parse(localStorage.getItem('loanInfo'))
          if (!canBorrow) return Toast({message: tm('hint_insufficient_score')})
          // 校验用户填写状态与 菜单显示隐藏
          let data = JSON.parse(localStorage.getItem('userInfoVerify'))
          const {
            ongoingOrder,
            pendingRepayment,
          } = data
          if (ongoingOrder || pendingRepayment) {
            Toast({
              message: tm('hint_apply_later')
            })
            return
          }
          /**
           * null 占位  埋点当前点击去的路由
           */
          processNext(null, '/personalData')
        }
    )
    /*
   * 获取流程菜单权限
   * */
    const productMenuAuth = async () => {
      const res = await fetchMenuFatherShow({productName: localStorage.getItem('productName')})
      if (res.code === 1) {
        const data = res.data
        const obj = {}
        for (let i = 0; i < data.length; i++) {
          if (data[i].status === 1) {
            obj['type' + i] = data[i].type
          }
        }
        menuAuth.value = obj
        // 清除loading
        store.dispatch('changeLoading', false)
      }
    }
    productMenuAuth()
    fetchUserVerify()
    // 获取用户全部填写信息
    getUserInfo()
    return {
      userVerify,
      supplyInfo,
      confirm,
      menuAuth
    }
  }
}
</script>

<style lang="less" scoped>
.personalData {
  background-color: #f2f3f5;
  overflow: auto;

  ::v-deep .van-nav-bar {
    z-index: 1999;
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  ::v-deep .van-switch {
    height: 26px !important;

    .van-switch__node {
      height: 26px !important;
    }

  }

  .content_list {
    border-radius: 5px;
    padding: 15px;
    box-sizing: border-box;

    .content_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: solid 1px #f2f3f5;
      padding: 3px 5px;
      background-color: #FFFFFF;

      div {
        height: 100%;
        display: flex;
        align-items: center;

        .image {
          height: 25px;
          width: 25px;
          margin-right: 10px;
        }

        .text {
          font-size: 12px;
          line-height: 40px;
          font-weight: 600;
        }
      }

      .select_right {
        color: #9D9D9D;
        font-size: 12px;
        margin-left: 5px;
        flex: 1;
        justify-content: flex-end;
      }

      .select_right_text {
        color: #9D9D9D;
        font-size: 12px;
        margin-right: 5px;
      }
    }
  }

  .confirm {
    margin-top: 20px;
    text-align: center;

    button {
      width: 300px;
      padding: 10px 0;
      color: #ffffff;
      border: none;
      font-size: 16px;
      background: linear-gradient(-45deg, #FF5252, #FF8C3C);
      box-shadow: 0px 4px 10px 0px rgba(255, 92, 78, 0.52);
      border-radius: 29px;
    }

  }

}
</style>
